<template>
    <div>
<!--        头部-->
        <topAdv :is-show="isShow"></topAdv>
<!--        主体-->
        <div id="main">
<!--            返回首页、视频详情按钮-->
            <div id="navBox">
                <span>
                    <span id="home">
                        <svg t="1639976995915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3299" width="18" height="18"><path d="M946.5 505L560.1 118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4 0L77.5 505c-12.3 12.3-18.9 28.6-18.8 46 0.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8 12.1-12.1 18.7-28.2 18.7-45.3 0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204z m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z" p-id="3300" fill="#8a8a8a"></path></svg>
                    </span>
                    <span id="backIndex">首页</span>
                    <span style="margin-top: 17px;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>
                    <span id="videoDetail">视频详情</span>
                </span>
            </div>
<!--            中间课程描述-->
            <div id="courseDesc">
<!--                课程图片盒子-->
                <div id="showImg">
                    <img :src="courseData.coverFileUrl" alt="">
                </div>
<!--                课程介绍-->
                <div id="showContent">
<!--                    课程名称-->
                    <h2 class="courseName">{{courseData.courseTitle}}</h2>
<!--                    学习人数-->
                    <span id="learnNum">
                        <span>累计<span>{{courseData.participationsCount}}</span>人学习</span>
                    </span>
<!--                    评分-->
                    <courseLevel v-bind:num="Number(courseData.courseLevel)"></courseLevel>
<!--                    价格-->
                    <h3 class="coursePrice" v-show="courseData.isFree=='0'"><span class="currentPrice">&yen;99.9</span><span class="oldPrice">&yen;1000</span></h3>
<!--                     免费 限时钜惠-->
                    <h3><span class="freeLogo" v-show="courseData.isFree=='1'">免费</span><span class="discountLogo" v-show="courseData.isFree=='0'">限时钜惠</span></h3>
<!--                    按钮组-->
                    <div id="btnBox">
                        <button id="toWatch" v-show="courseData.isFree=='1'">立即观看</button>
                        <button id="toBuy"  v-show="courseData.isFree=='0'">立即购买</button>
                        <button id="toAdd"  v-show="courseData.isFree=='0'">加入购物车</button>
                    </div>
                </div>
<!--                收藏按钮-->
                <button id="collectBtn">
                    <span style="margin-top: 5px;margin-left: 16px">
                           <svg t="1639981285423" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2786" width="20" height="20"><path d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z" p-id="2787" fill="#bfbfbf"></path></svg>
                    </span>
                    <span>收藏</span>

                </button>
            </div>
<!--            课程大纲-->
            <div id="courseDirectory">
<!--                上边导航-->
                <div>
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="课程介绍" name="first" v-html="courseData.courseDetail">
<!--                            课程介绍-->
                        </el-tab-pane>
                        <el-tab-pane label="目录" name="second">
<!--                            目录-->
                                <h2 v-for="(item,index) in courseData.sections" :key="index">
                                    <span class="courseNameStyle">{{index+1+"."+item.sectionName}}</span>
                                    <button class="downBtn">
                                        <span class="downLoadLogo">
                                            <svg t="1640001185127" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2750" width="18" height="18"><path d="M646.791 799v-31.447c0-8.837 7.164-16 16-16H735c88.127 0 159.569-71.46 159.569-159.61 0-88.15-71.442-159.61-159.569-159.61-11.454 0-26.738 2.548-45.854 7.645a7.931 7.931 0 0 1-9.616-10.01c7.907-25.529 11.861-45.89 11.861-61.083 0-99.1-80.316-179.438-179.391-179.438-99.075 0-179.391 80.337-179.391 179.438 0 15.193 3.954 35.554 11.861 61.083a7.929 7.929 0 0 1-9.616 10.01c-19.116-5.097-34.4-7.646-45.854-7.646-88.127 0-159.569 71.46-159.569 159.61 0 88.15 71.442 159.61 159.569 159.61h73.2c8.837 0 16 7.164 16 16V799c0 8.837-7.163 16-16 16H289c-123.16 0-223-99.866-223-223.058 0-116.51 89.304-212.156 203.18-222.188-0.002-0.29-0.002-0.58-0.002-0.87C269.178 234.745 377.893 126 512 126s242.822 108.743 242.822 242.885l-0.001 0.869C868.696 379.786 958 475.432 958 591.942 958 715.134 858.16 815 735 815h-72.209c-8.836 0-16-7.163-16-16zM545.87 717.848l79.364-69.93c13.636-11.031 33.643-8.931 44.685 4.691 11.043 13.622 8.94 33.607-4.696 44.638L538.526 805.466c-11 11.252-28.92 12.857-41.826 3.141L359.653 698.03c-14.014-10.55-16.814-30.449-6.253-44.447 10.56-14 30.48-16.796 44.494-6.247l84.431 70.973v-286.57c0-17.529 14.225-31.738 31.772-31.738 17.547 0 31.772 14.21 31.772 31.738v286.11z" p-id="2751" fill="#ffffff"></path></svg>
                                        </span>
                                        <span>下载</span>

                                    </button>
                                    <p v-for="(item,ind) in item.subSections" :key="ind" class="sectionStyle">
                                        {{index+1+'-'+(ind+1)+'  '+item.sectionName}}
                                        <span class="playBtn"><i class="el-icon-video-play"></i></span>
                                        <span class="play">观看</span>
                                    </p>
                                </h2>
                        </el-tab-pane>
                        <el-tab-pane label="评论" name="third">
                            <p>评论</p>
                            <courseLevel v-bind:num="5"></courseLevel>
                            <span class="levelDesc">非常好</span>
                            <el-input  type="textarea" :rows="5" placeholder="请发表您对课程的评价" v-model="textarea">
                            </el-input>
                            <div style="overflow: hidden">
                                <button class="sendView">发表评论</button>
                            </div>
                            <ul class="viewsBox">
<!--                                第一次遍历----------------------------------------------------------->
                                <li v-for="(item,index) in views.rows" :key="index">
<!--                                    头像和评分-->
                                    <div class="headPhoto">
                                        <div class="userPho">
                                            <div class="phoBox"><img :src="item.user.avatarUrl" alt=""></div>
                                        </div>
                                        <div class="userName">
                                            {{item.user.nickname}}
                                        </div>
                                        <courseLevel :num="item.score" class="userLevel"></courseLevel>
                                    </div>
<!--                                    评论内容-->
                                    <p class="viewsContent">
                                        {{item.commentContent}}
                                    </p>
<!--                                    更新时间-->
                                    <p class="updatedTime">
                                        {{item.updatedTime}}
                                        <span class="reply">回复</span>
                                    </p>
<!--                                    楼主回复-->
                                    <ul class="answer" v-show="item.subCommentList.length!=0">
<!--                                        第二次遍历---------------------------------------------------------->
                                        <li v-for="(i,index) in item.subCommentList" :key="index" class="li">
                                            <span class="headPhotoBox">
                                                <img :src="i.user.avatarUrl" alt="">
                                            </span>
                                            <span class="user">
                                                {{i.user.nickname}}
                                            </span>
                                            回复
                                            <span class="user" style="margin-left: 0px">{{item.user.nickname}}</span>
                                            :
                                            {{i.commentContent}}
                                            <p class="updatedTime">
                                                {{i.createdTime}}
                                                <span class="reply">回复</span>
                                            </p>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="views.total"
                            @current-change="turnPage"
                            >
                            </el-pagination>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
<!--        底部-->
        <footNav></footNav>
    </div>
</template>

<script>
    import topAdv from "../../components/topAdv";
    import footNav from "../../components/footNav";
    import {getCourseData, getViews} from "../../../api/courseDetail";
    import courseLevel from "./components/courseLevel";

    export default {
        name: "courseDetail",
        components:{
            topAdv,
            footNav,
            courseLevel
        },
        data(){
            return {
                isShow:true,
                activeIndex: '1',
                courseData:[],
                activeName: 'first',
                textarea:"",
                views:[],
            }
        },
        methods:{
            //评论分页
            turnPage(params){
                getViews(this.$route.query.courseId,params,10).then(res=>{
                    this.views = res;
                })
            }
        },
        created() {
            //获取课程数据
            getCourseData(this.$route.query.courseId).then(res=>{
                this.courseData = res.data;
            })
            //获取评论
            getViews(this.$route.query.courseId,1,10).then(res=>{
                this.views = res;
            })
        }
    }
</script>

<style scoped lang="less">
    @hoverColor:#00cf8c;
    [v-cloak]{
        display: none;
    }
    //主体盒子
    #main{
        padding-bottom: 40px;
        width: 100%;
        background-color: #f4f4f4;
    }
    //返回首页 视频详情按钮
    #navBox{
        margin: auto;
        width: 1200px;
        height: 50px;
        background-color: #f4f4f4;
        text-align: left;
        overflow: hidden;
    span{
        display: block;
        float: left;
        color: rgba(0,0,0,.65);
    }
    }
    #home{
        margin-top: 15px;
        display: block;
        vertical-align: bottom;
    }
    #backIndex{
        margin-top: 15px;
        display: block;
        margin-left: 3px;
        font-size: 14px;
    }
    #videoDetail{
        margin-top: 15px;
        font-size: 14px;
    }
    #backIndex:hover,
    #videoDetail:hover {
        color: @hoverColor;
        cursor:pointer;
    }
    //课程描述最大盒子
    #courseDesc{
        margin: auto;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        width: 1200px;
        height: 271px;
        background-color: white;
    }
    //课程图片盒子
    #showImg{
        img{
            width: 387px;
            height: 220px;
        }
    }
    //课程介绍
    #showContent{
        padding-left: 50px;
        width: 677px;
        height: 220px;
        text-align: left;
        box-sizing: border-box;
        h2{
            font-weight: normal;
        }
        h3{
            margin: 0;
            margin-top: 10px;
        }
    }
    //收藏按钮
    #collectBtn{
        display: flex;
        width: 110px;
        height: 30px;
        text-align: center;
        font-size: 16px;
        line-height: 26px;
        color: #999;
        background-color: white;
        border: 1px solid #999;
        cursor: pointer;
        span{
            display: block;
        }
    }
    //学习人数
    #learnNum{
        font-size: 14px;
        color: #999;
    }
    //评分的小星星
    /deep/
    .block{
        display: inline-block;
        margin-left: 10px;
    }
    /deep/
    .el-rate__icon{
        font-size: 22px;
    }
    /deep/
    .el-rate__icon, .el-rate__item{
        top: -3px;
    }
    //价格
    .currentPrice{
        margin-right: 10px;
        font-size: 24px;
        font-weight: normal;
    }
    .oldPrice{
        font-size: 14px;
        text-decoration: line-through;
        color: rgb(255, 79, 35);
        font-weight: normal;
    }
    //免费 折扣图标
    .freeLogo{
        color: @hoverColor;
        font-size: 24px;
    }
    .discountLogo{
        display: inline-block;
        width: 64px;
        height: 22px;
        color: #fa8c16;
        background: #fff7e6;
        border: 1px solid #ffd591;
        box-sizing: border-box;
        border-radius: 2px;
        text-align: center;
        line-height: 22px;
        font-size: 12px;
    }
    //按钮盒子
    #btnBox{
        button{
            margin-right: 10px;
            width:160px;
            height: 45px;
            text-align: center;
            font-size: 18px;
            cursor: pointer;
        }
    }
    #toWatch,
    #toAdd{
        color: #fff;
        background-color: #23db9b;
        border: #23db9b;
    }
    #toBuy{
        background: rgb(255, 128, 0);
        border: rgb(255, 128, 0);
        color: #fff;
    }
    #toWatch{
        margin-top: 40px;
    }
    #toAdd,
    #toBuy{
        margin-top: 10px;
    }
    //课程大纲
    #courseDirectory {
        margin: 20px auto 0px;
        padding: 20px;
        box-sizing: border-box;
        width: 1200px;
        background-color: white;
        text-align: left;
        h2{
            font-weight: normal;
            font-size: 22px;
        }
    }
    /deep/
    .el-tabs__active-bar{
        background-color: @hoverColor;
    }
    /deep/
    .el-tabs__item.is-active{
        color: @hoverColor;
    }
    /deep/
    .el-tabs__item:hover{
        color: @hoverColor
    }
    .el-tab-pane{
        padding-left: 20px;
        padding-right: 20px;
    }
    .sectionStyle{
        position: relative;
        font-size: 14px;
        height: 30px;
        line-height: 32px;
        padding: 10px 20px;
        background: #f2f2f2;
    }
    .sectionStyle:hover{
        color: #00cf8c;
        cursor: pointer;
        .playBtn{
            display: none;
        }
        .play{
            display: block;
            top: 13px;
        }
    }
    .downBtn{
        margin-right: 8px;
        float: right;
        width: 80px;
        height: 30px;
        background-color: rgb(45, 183, 245);
        color: white;
        padding-top: 5px;
        border: 0;
        border-radius: 3px;
        cursor: pointer;
        span{
            display: inline-block;
        }
    }
    .downLoadLogo{
        vertical-align: top;
    }
    .courseNameStyle{
        padding-left: 10px;
    }
    .playBtn{
        float: right;
    }
    .el-icon-video-play{
        font-size: 18px;
    }
    .play{
        position: absolute;
        right: 15px;
        top: 10px;
        display: none;
    }
    .levelDesc{
        display: inline-block;
        margin-left: 8px;
        font-size: 14px;
    }
    .sendView{
        margin: 20px 0px;
        float: right;
        width: 88px;
        height: 32px;
        color: white;
        background-color: @hoverColor;
        border: 0;
    }
    .headPhoto{
        margin: auto;
        margin-top: 10px;
        display: flex;
        width: 1120px;
        height: 32px;
    }
    .userPho{
        float: left;
        img{
            width: 32px;
            height: 32px;
        }
    }
    .phoBox{
        width: 32px;
        height: 32px;
        overflow: hidden;
        border-radius: 50%;
    }
    .viewsBox{
        li{
            border-bottom: 1px solid lightgray;
            padding-top: 20px;
            box-sizing: border-box;
        }
    }
    .userName{
        margin-top: 5px;
        margin-left: 20px;
        width: 900px;
    }
    .userLevel{
        margin-top: 8px;
    }
    .viewsContent{
        margin-left: 50px;
    }
    .updatedTime{
        padding: 0 10px 0 0;
        color: #999;
        text-align: right;
        font-size: 14px;
    }
    .reply{
        margin-left: 6px;
    }
    .reply:hover{
        color: #00cf8c;
        cursor: pointer;
    }
    .headPhotoBox{
        display: inline-block;
        width: 32px;
        height: 32px;
        overflow: hidden;
        border-radius: 50%;
        vertical-align: middle;
        img{
            width: 32px;
            height: 32px;
        }
    }
    .user{
        margin-left: 10px;
        display: inline-block;
        color: rgb(24, 144, 255);
    }
    .answer{
        margin: 20px 0 0 40px;
        padding: 10px;
        border: 1px solid #d9d9d9;
        background: #fafafa;
    }
    .li:last-child{
        border-bottom: 0 !important;
    }
    .el-pagination{
        text-align: center;
    }
</style>